<template>
    <div id="userRole">
        <h2> <i :class="'el-icon-user-solid'"></i> {{userName}}</h2>
        <el-divider></el-divider>
        <el-button type="primary" @click="showAdd" >分配新角色</el-button>
        <h4>已拥有的角色:</h4>
        <el-table
                :data="roleByUserId"
                style="width: 100%"
                tooltip-effect="dark"
                max-height="500">
            <el-table-column
                    prop="roleName"
                    label="描述">
            </el-table-column>
            <el-table-column
                    prop="description"
                    label="权限名">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <el-button @click="deleteUserRole(scope.$index,scope.row)" type="text" size="small">移除角色</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
                title="添加用户未拥有的角色"
                :visible.sync="addDialogVisible"
                width="60%"
                @close="getHad"
                center>
            <div>

                <el-table
                        :data="notExistRole"
                        tooltip-effect="dark"
                        style="width: 100%"
                        max-height="500"
                        @selection-change="selectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="roleName"
                            label="描述">
                    </el-table-column>
                    <el-table-column
                            prop="description"
                            label="角色名">
                    </el-table-column>
                </el-table>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" :aria-disabled="true" @click="addUserRole">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        name: "UserRole",
        data(){
            return {
                addDialogVisible: false,
                id:null,
                userName: null,
                roleByUserId: [
                    {
                        id: null,
                        roleName: null,
                        description: null
                    }
                ],
                notExistRole: [
                    {
                        id: null,
                        roleName: null,
                        description: null
                    }
                ],
                addData: {
                    id: null,
                    userName: null,
                    roleList: [
                        {
                            id: null,
                            roleName: null
                        }
                    ]
                },
                userRoleData: {
                    userId: null,
                    roleId: null
                }
            }
        },
        methods: {
            /*获取已拥有的角色*/
            async getHad(){
                const resp = await this.$http.get("/sysRole/getByUserId?id="+this.id);
                const data = resp.data;
                if (data.code === 200){
                    this.roleByUserId = data.rows;
                }else{
                    this.$message.error(data.info)
                }
            },
            /*显示分配新角色的dialog*/
            async showAdd(){
                this.addDialogVisible = true;
                const resp = await this.$http.get("/sysRole/getByNotUserId?id="+this.id);
                const data = resp.data;
                if (data.code === 200){
                    this.notExistRole = data.rows;
                }else{
                    this.$message.error(data.info);
                }
            },
            /*当选择选择框时赋值*/
            selectionChange(rows){
                this.addData.roleList = rows;
            },
            /*分配角色*/
            async addUserRole(){
                this.addData.id = this.id;
                this.addData.userName = this.userName;

                const resp = await this.$http.post("/sysRole/addUserRole",this.addData);
                const data = resp.data;
                if (data.code === 200){
                    this.addData.roleList = null;
                    this.$message.success(data.info);
                }else {
                    this.$message.error(data.info)
                }
                this.showAdd();
            },
            /*移除已分配的角色*/
            deleteUserRole(index,row){
                this.$confirm("确定移除?","提示",{
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type: 'warning'
                }).then(() => {
                    this.userRoleData.userId = this.id;
                    this.userRoleData.roleId = row.id;
                    this.$http.post("/sysRole/deleteUserRole",this.userRoleData).then(resp => {
                        const data = resp.data;
                        if (data.code === 200){
                            this.$message.success(data.info);
                            this.roleByUserId.splice(index,1);
                        }else {
                            this.$message.error(data.info);
                        }
                    })

                }).catch(() => {
                });
            }
        },
        created() {
            this.id = this.$route.query.id;
            this.userName = this.$route.query.userName;
            this.getHad();
        }
    }
</script>

<style scoped>

</style>
